<template>

  <div class="container">

    <div class="content">

      <div class="content_left">

        <div class="img_left">
          <img src="@/assets/image/123.png" alt="">
        </div>
      </div>
      <div class="content-right">
        <el-link :underline="false">
          <h2 @click="LoginMethod()"> 登录 &nbsp; </h2>
        </el-link>
        <el-link :underline="false">
          <h2 @click="RegisterMethod()">注册</h2>
        </el-link>

        <div v-if="(isLogin == 1)" class="form-control">
          <el-form ref="form" :model="register_form" label-width="80px">
            <el-form-item label="用户名">
              <el-input v-model="register_form.name"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="register_form.phone"></el-input>
            </el-form-item>

            <el-form-item label="密码">
              <el-input type="password" auto-complete="off" v-model="register_form.password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码">
              <el-input type="password" auto-complete="off" v-model="register_form.passwordAgain"></el-input>
            </el-form-item>
            <el-form-item label="公司名称">
              <el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="请输入内容"
                @select="handleSelect"></el-autocomplete>
            </el-form-item>
            <!-- <el-form-item label="验证码">
              <el-input type="text" auto-complete="off" v-model="register_form.code">
                <el-button slot="append" @click="getVertify">获取验证码{{ t }}</el-button></el-input>
              <el-image :src="src"></el-image>

            </el-form-item> -->

            <el-form-item>
              <el-button type="primary" @click="Register_Submit">注册</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>

        </div>




        <div v-if="(isLogin == 0)" class="form-control">

          <el-form ref="form" :model="login_form" label-width="80px">

            <el-form-item label="手机号">
              <el-input v-model="login_form.phone"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input type="password" v-model="login_form.password"></el-input>
            </el-form-item>
            <!-- <el-form-item label="验证码">
              <el-input type="text" auto-complete="off" v-model="login_form.code">
                <el-button slot="append" @click="getVertify">获取验证码{{ t }}</el-button></el-input>
              <el-image :src="src"></el-image>

            </el-form-item> -->


            <el-form-item>
              <el-button type="primary" @click="Login_Submit">登录</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import userAPI from '@/api/userApi';
import { companyAPI, empAPI } from '@/api/employerApi';
export default {
  data() {
    return {
      t: '',
      src: '',
      //0登录 1注册
      isLogin: 0,
      register_form: {
        name: '',
        password: '',
        passwordAgain: '',
        phone: '',
        companyId: '',


      },
      login_form: {

        password: '',
        phone: '',



      },
      companyInfo: {
        value: '',
        id: '',
      },
      restaurants: [],
      state: '',
      timeout: null
    }
  },
  mounted() {

    companyAPI.getCompanyList().then(res => {

      res.data.data.forEach(item => {
        this.companyInfo.value = item.companyName
        this.companyInfo.id = item.id
        this.restaurants.push(this.companyInfo)

        this.companyInfo = {}
      });
      //  console.log(res.data.data)
    })
  },
  methods: {

    //返回所有公司数据
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 3000 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect(item) {
      this.register_form.companyId = item.id
    },


    //登录页面
    LoginMethod() {

      this.isLogin = 0;


    },
    //注册页面
    RegisterMethod() {
      this.isLogin = 1;
    },
    Login_Submit() {
      empAPI.EmpLogin(this.login_form).then((res) => {
        if (res.data.msg === 'success') {
          localStorage.setItem('employer_info', JSON.stringify(res.data.data));
          //登录成功
          //  console.log("success", res.data.data.id)
          this.$router.push({ name: 'employerInfo', query: { employerId: res.data.data.id } });
        } else {
          this.$message.error('登录失败');
        }
      }).catch((res) => {
        //   console.log(res, '登录失败')
      })
    },
    Register_Submit() {
      if (this.register_form.password == '') {
        this.$message.error("密码不能为空");

        return;
      }
      if (this.register_form.password != this.register_form.passwordAgain) {
        this.$message.error("两次密码不一致")
        return;
      }
      if (this.register_form.companyId == '') {
        this.$message.error("公司不能为空，没有公司名称请和管理员联系")
        return;
      }
      empAPI.EmpRegister(this.register_form).then((res) => {
        if (res.data.msg === 'success') {
          this.isLogin = 0;
          this.$router.push({ name: 'employerLogin' });
          this.$message.success("注册成功");
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(error => {
        //   console.log("注册失败", error)
        this.$message.error('注册失败');
      })
    },


    getVertify() {
      if (this.isLogin == 0) {
        if (!this.login_form.phone == '') {
          this.src = 'http://127.0.0.1/user/getCode?phone=' + this.login_form.phone + '&time=' + Date.now();

        } else {
          this.$notify.error({
            title: '错误',
            message: '手机号码不能为空',
            showClose: false
          });
        }
      } else {
        if (!this.register_form.phone == '') {
          this.src = 'http://127.0.0.1/user/getCode?phone=' + this.register_form.phone + '&time' + Date.now();
        } else {
          this.$notify.error({
            title: '错误',
            message: '手机号码不能为空',
            showClose: false
          });
        }
      }

    }




  }
}
</script>

<style lang="less" scoped>
/deep/ a.el-link.el-link--default:active {
  color: #409eff;
}

.container {
  margin: 30px;
  line-height: 0;
  width: 80%;
}

.el-form {

  padding: 10px;
}

.el-form-item {
  margin: 10px auto;
  width: 90%;
}

.form-control {
  text-align: center;
  box-shadow: gray 0px 0px 5px;
  border-radius: 10px;
  width: 80%;
  margin: auto;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-weight: 400;
  line-height: normal;
  height: 500px;


}

.content {
  display: flex;
}

.content_left {
  width: 100%;
  flex: 1;


}

.content-right {
  text-align: center;
  flex: 1;
  margin: 0px;
}

.img_left {
  height: 300px;
  width: 300px;
}

.img_left img {
  width: 100%;
  height: 100px;
}
</style>
